<template>
	<common-card class="portal_work_schedule">
		<a-table v-bind="tableConfig" row-key="id" :data="tableData" :span-method="dataSpanMethod" />
	</common-card>
</template>

<script lang="ts" setup>
import dayjs from 'dayjs';
import commonCard from '../commonCard.vue';
defineOptions({ name: 'WorkSchedule' });
interface TableProp {
	id: number;
	date: string;
	content: string;
	leader: string;
	personnel?: string;
	depart?: string;
	address?: string;
}
const tableData = reactive<TableProp[]>([
	{ id: 1, date: '20251208', content: '修订开学指南', leader: '向武', personnel: '', depart: '', address: '居家办公' },
	{ id: 2, date: '20251208', content: '在线教学听课', leader: '孙健平', personnel: '', depart: '教务处', address: '居家办公' },
	{ id: 3, date: '20251208', content: '在校值班', leader: '雷健', personnel: '邓汉平，薛国喜', depart: '', address: '水磨' },
	{ id: 4, date: '20251209', content: '党委常委会', leader: '吴昊', personnel: '党委常委', depart: '党政办公室', address: '居家办公' },
	{ id: 5, date: '20251209', content: '校长办公室', leader: '向武', personnel: '校领导，相关部门负责人', depart: '党政办公室', address: '居家办公' },
	{ id: 6, date: '20251209', content: '在校值班', leader: '雷健', personnel: '邓汉平，薛国喜', depart: '', address: '水磨' },
	{ id: 7, date: '20251209', content: '集灿居租赁善后事宜洽谈', leader: '毛英', personnel: '', depart: '', address: '' },
	{ id: 8, date: '20251210', content: '考察', leader: '向武', personnel: '', depart: '', address: '' },
	{ id: 9, date: '20251210', content: '出差', leader: '毛英', personnel: '', depart: '', address: '' },
	{ id: 10, date: '20251211', content: '相关部门视频会议', leader: '向武', personnel: '', depart: '', address: '居家办公' },
	{ id: 11, date: '20251212', content: '在线教学听课', leader: '向武', personnel: '', depart: '教务处', address: '居家办公' },
	{ id: 12, date: '20251212', content: '在线教学听课', leader: '毛英', personnel: '', depart: '教务处', address: '居家办公' },
	{ id: 13, date: '20251212', content: '教学工作视频会议', leader: '毛英', personnel: '', depart: '教务处', address: '居家办公' }
]);

const tableConfig = ref({
	pagination: false,
	pagePosition: 'bottom',
	scroll: { maxHeight: 205 },
	bordered: { wrapper: true, cell: true },
	columns: [
		{
			title: '日期',
			dataIndex: 'date',
			align: 'center',
			render: ({ record }) => {
				let date = dayjs(record.date);
				return h('div', {}, [
					// 子节点1：标签
					h('span', {}, date.format('M月D日')),
					// 子节点2：内容
					// h('span', {}, date.format('W'))
				]);
			}
		},
		{ title: '工作安排', dataIndex: 'content' },
		{ title: '主持领导', dataIndex: 'leader' },
		{ title: '参加人员', dataIndex: 'personnel' },
		{ title: '牵头单位', dataIndex: 'depart' },
		{ title: '工作地点', dataIndex: 'address' }
	]
});

const getSpanRules = () => {
	let dateMap = new Map<string, number>();
	let dateCountMap = new Map<string, number>();
	let spanRules: { rowspan: number; colspan: number }[][] = [];
	// 第一步：统计每个分类的行数
	tableData.forEach((item) => dateMap.set(item.date, (dateMap.get(item.date) || 0) + 1));
	// 第二步：生成每行每列的合并规则
	tableData.forEach((item, rowIndex: number) => {
		let date = item.date;
		let columns = tableConfig.value.columns;
		let rowSpan: { rowspan: number; colspan: number }[] = [];
		// 遍历每一列（与columns顺序对应）
		columns.forEach((_, colIndex: number) => {
			if (colIndex === 1) {
				// 第2列（category列）：按分类合并
				let currentCount = dateCountMap.get(date) || 0;
				if (currentCount === 0) {
					// 第一个单元格：设置合并行数
					rowSpan.push({ rowspan: dateMap.get(date) || 1, colspan: 1 });
				} else {
					// 后续单元格：隐藏（rowspan=0）
					rowSpan.push({ rowspan: 0, colspan: 0 });
				}
				dateCountMap.set(date, currentCount + 1);
			} else {
				// 其他列：不合并
				rowSpan.push({ rowspan: 1, colspan: 1 });
			}
		});
		spanRules.push(rowSpan);
	});
	return spanRules;
};

const spanRules = computed(() => getSpanRules());

const dataSpanMethod = ({ rowIndex, columnIndex }) => {
	return spanRules.value[rowIndex][columnIndex + 1];
};
</script>

<style lang="scss" scoped>
.portal_work_schedule {
	&:deep(.arco-card-body) {
		flex-direction: column;
	}
	.arco-table {
		flex: 1;
		overflow: hidden;
	}
	&:deep(.arco-table-container) {
		border: none;
	}
	&:deep(.arco-table-border .arco-table-scroll-y .arco-table-body .arco-table-tr:last-of-type .arco-table-td),
	&:deep(.arco-table-border .arco-table-scroll-y tfoot .arco-table-tr:last-of-type .arco-table-td) {
		border-bottom: solid 1px var(--color-border-table);
	}
}
</style>
